<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';

//分页条数据模型
const pageNum = ref(1)//当前页
const pageSize = ref(4)//每页条数

//定义返回列表数据
const announcement = ref([])

//获取公告列表数据
import {getLastAnnouncementService} from '@/api/AnnouncementAll.js'

//绑定查询函数
const getLastAnnouncement=async()=>{
    let params={
        page: pageNum.value,
        pageSize: pageSize.value
    }
    let result= await getLastAnnouncementService(params)
    announcement.value=result.data.records

}
//调用函数
getLastAnnouncement();

//跳转到公告详情
const router = useRouter();
const handleRowClick = (row) => {
      // 使用 router.push 进行页面跳转
      // 假设您要跳转到的页面路径是 '/details'，并且希望传递行的 ID
      router.push({ path: '/details',query: { id: row.id } });
    };

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>最新公告</span>
            </div>
        </template>
        <el-table :data="announcement" style="width: 100%" @row-click="handleRowClick">
            <el-table-column label="公告名称" prop="title"></el-table-column>
            <el-table-column label="发布时间" prop="modifiedTime"></el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>